<template>
	<div class="gongyingshangshangpin">
    <left></left>
    <div class="right">
      <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        </el-breadcrumb>
        <top></top>
      </div>
      <div style=" padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
       <div style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700;">
         供应商产品
       </div>
        <div class="flex">
          <div style="width: 220px; height: 120px;background: rgb(255, 255, 255); border-radius: 20px; margin-right: 20px; " class="flexcc">
            <div class="flexbc">
              <div><img src="../../assets/img/fengjing.jpg" style="width: 60px; height: 60px; border-radius: 30px; margin-right: 10px;"></div>
              <div>
                <div style="color: rgb(2, 12, 29); font-size: 28px; font-weight: bold; margin-bottom: 5px;">100</div>
                <div style="color: rgb(120, 125, 133); font-size: 14px;">商品总数</div>
              </div>
            </div>
          </div>
          <div style="width: 220px; height: 120px;background: rgb(255, 255, 255); border-radius: 20px; " class="flexcc">
            <div class="flexbc">
              <div><img src="../../assets/img/fengjing.jpg" style="width: 60px; height: 60px; border-radius: 30px; margin-right: 10px;"></div>
              <div>
                <div style="color: rgb(2, 12, 29); font-size: 28px; font-weight: bold; margin-bottom: 5px;">100</div>
                <div style="color: rgb(120, 125, 133); font-size: 14px;">已上架商品数</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 3 -->
        <div style="padding: 38px 0 19px 0; font-size: 18px; font-weight: 700;">
          供应商检索
        </div>
        <!-- 4 -->
        <div style="height: 112px; background: rgb(255, 255, 255); border-radius: 20px; padding: 20px;" class="flexb">

            <div class="flex">
              <div>
                <div style="margin-bottom: 10px;">商品名称</div>
                <div><el-input v-model="all.name" style="width: 200px; margin-right: 30px;" placeholder="请输入"></el-input></div>
              </div>
              <div>
                <div style="margin-bottom: 10px;">佣金区间</div>
                <div class="flexc">
                  <div><el-input v-model="all.name" style="width: 120px; margin-right: 10px;" placeholder="请输入"></el-input></div>
                  <div style="color: color: rgb(175, 179, 188);">~</div>
                  <div><el-input v-model="all.name" style="width: 120px; margin-left: 10px; margin-right: 30px;" placeholder="请输入"></el-input></div>
                </div>
              </div>
              <div>
                <div style="margin-bottom: 10px;">卖点</div>
                <div><el-input v-model="all.name" style="width: 200px; margin-right: 30px;" placeholder="请输入"></el-input></div>
              </div>
              <div>
                <div style="margin-bottom: 10px;">状态</div>
                <div>
                  <el-select v-model="value" placeholder="请选择" style="margin-right: 30px; width: 140px;">
                      <el-option  v-for="item in options"  :key="item.value"  :label="item.label"  :value="item.value"></el-option>
                  </el-select>
                </div>
              </div>
              <div style="margin-right: 30px;">
                <div style="margin-bottom: 10px;">&nbsp;</div>
                <div><el-button type="primary" round icon="el-icon-search">检索</el-button></div>
              </div>
              <div>
                <div style="margin-bottom: 10px;">&nbsp;</div>
                <div class="flexc" style="line-height: 41px; color: rgb(175, 179, 188); font-size: 12px;">正序排列 <i class="el-icon-sort" style="margin-left: 10px;"></i></div>
              </div>
            </div>
            <div style="margin-right: 30px;">
              <div style="margin-bottom: 10px;">自动上架</div>
              <div><el-switch v-model="zidong" style="width: 85px; height: 41px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);"></el-switch></div>
            </div>

        </div>
        <!-- 5 -->
        <div class="flex" style="margin-top: 20px; justify-content: space-between;">
          <div style="width: 500px; height: 280px; padding: 20px; margin-bottom: 20px; background: rgb(255, 255, 255); border-radius: 20px;" v-for="item in 9" :key="item">
            <div class="flexbc">
              <div class="flex">
                <div style="color: rgb(2, 12, 29); font-size: 12px; margin-right: 20px;">供应商:铂铭</div>
                <div style="color: rgb(212, 215, 222); font-size: 12px;">发布时间: 2023-9-26 10:14:13</div>
              </div>
              <div class="flex">
                <div style="background: rgb(254, 61, 61); border-radius: 4px; width: 34px; height: 20px; color: rgb(255, 255, 255); font-size: 12px;" class="flexcc">主推</div>
                <div style="background: rgb(0, 90, 255); border-radius: 4px; width: 34px; height: 20px; color: rgb(255, 255, 255); font-size: 12px; margin-left: 20px;" class="flexcc">置顶</div>
              </div>
            </div>
            <div class="flex" style="margin-top: 20px;">
              <div><img src="../../assets/img/yueshi.jpeg" style="width: 100px; height: 100px; border-radius: 10px;"></div>
              <div style="margin-left: 20px;">
                <div style="color: rgb(2, 12, 29); font-size: 16px; font-weight: bold; line-height: 19px; margin-bottom: 10px;">电信天立卡25元190GB通用+50G定向流量</div>
                <div style="color: rgb(254, 61, 61); font-size: 12px; margin-bottom: 10px;">仅发广东地区，其他地区不发货</div>
                <div class="flex">
                  <div style="color: rgb(254, 61, 61); background: rgb(255, 242, 242);" class="flexcc xt">京东配送</div>
                  <div style="color: rgb(31, 159, 48); background: rgb(229, 255, 217);" class="flexcc xt">永久套餐</div>
                  <div style="color: rgb(189, 55, 255); background: rgb(251, 239, 255);" class="flexcc xt">无期限合约</div>
                  <div style="color: rgb(55, 175, 255); background: rgb(239, 250, 255);" class="flexcc xt">无期限合约</div>
                </div>
              </div>
            </div>
            <div style="margin: 20px 0; font-size: 12px; color: rgb(120, 125, 133);">
              佣金规则:激活给 $50
              激活且首充再给 $50
            </div>
            <div class="flexbc">
              <div class="flex">
                <div class="flexcc ljact">复制链接</div>
                <div class="flexcc lj">打开链接</div>
                <div class="flexcc lj">下载二维码</div>
              </div>
              <div @click="xuanzhong(item)">
                <el-dropdown @command="handleCommand" trigger="click" >
                  <span class="el-dropdown-link">
                    <img src="../../assets/img/yueshi2.jpg" style="width: 32px; height: 32px; border-radius: 16px; cursor: pointer;">
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">编辑商品</el-dropdown-item>
                    <el-dropdown-item command="b">置顶</el-dropdown-item>
                    <el-dropdown-item command="c">主推</el-dropdown-item>
                    <el-dropdown-item command="d">设置排序</el-dropdown-item>
                    <el-dropdown-item command="e">下架商品</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>

              </div>
            </div>

          </div>
        </div>
        <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :current-page="search.page"
         @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
		 <!-- <footers></footers> -->
      </div>

    </div>
	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
	export default {
		name: 'gongyingshangshangpin',
    components:{
      left,top,footers
    },
		data() {
			return {
        all:{},
        search:{
          page:1,
          page_size:20
        },
        total:100
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
      fanye:function(){
        console.log(1)
      },
      xuanzhong:function(item){
        console.log(item)
      },
      handleCommand:function(e){
        console.log(e)
        if(e == 'a'){
          this.$router.push('/shangpinguanli/gongyingshangshangpin/bianjishangpin')
        }
      }
		}
	}
</script>


<style scoped lang="less">
  .gongyingshangshangpin{
    .sxjact{background: rgb(0, 90, 255); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(255, 255, 255); width: 150px; height: 60px; margin-right: 30px; }
    .sxj{background: rgb(227, 232, 241); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(175, 179, 188); width: 150px; height: 60px; margin-right: 30px; }
    .xt{width: 72px;height: 26px; margin-right: 10px; border-radius: 5px; font-size: 12px;}
    .lj{width: 100px; height: 32px; color: rgb(64, 66, 71); background: rgb(227, 232, 241); border-radius: 16px; margin-right: 20px; font-size: 14px; cursor: pointer;}
    .ljact{width: 100px; height: 32px; color: rgb(0, 90, 255); background: rgb(228, 237, 255); border-radius: 16px; margin-right: 20px; font-size: 14px; cursor: pointer;}

    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: rgb(0, 90, 255);}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: rgb(0, 90, 255);
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid; width: 28px; height: 30px;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}
    /deep/ .el-pagination__jump .el-input__inner{  line-height: 28px !important; height: 28px !important;}
  }

</style>
